<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>我的订单</title>
	<link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<!-- Custom Theme files -->
	<link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
	<!-- Custom Theme files -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--webfont-->
	<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/login.js}"></script>
	<script th:src="@{/js/jquery.easydropdown.js}"></script>
	<!--Animation-->
	<script th:src="@{/js/wow.min.js}"></script>
	<link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
	<link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
	<!-- Ionicons -->
	<link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
	<!-- DataTables -->
	<link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
	<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
	<link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">
	<script>
        new WOW().init();
	</script>
</head>
<body>
<div class="header">
	<div class="col-sm-8 header-left">
		<div class="logo">
			<a href="index.html"><img th:src="@{/images/logo.png}" alt=""/></a>
		</div>
		<div class="menu">
			<a class="toggleMenu" href="#"><img th:src="@{/images/nav.png}" alt="" /></a>
			<ul class="nav" id="nav">
				<li><a th:href="@{/toUserLogin}">首页</a></li>
				<li><a href="news.html">新闻</a></li>
				<li class="active"><a href="/userOrder/userorder">我的订单</a></li>
				<li><a th:href="@{/EditUser/allHotel}">旗下酒店</a></li>
				<li><a th:href="@{/EditUser/findUserId}">个人中心</a></li>
				<li><a href="404.html">社区</a></li>
				<div class="clearfix"></div>
			</ul>
			<script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
		</div>
		<!-- start search-->
		<div class="search-box">
			<div id="sb-search" class="sb-search">
				<form>
					<input class="sb-search-input" placeholder="请输入你要查询的关键字" type="search" name="search" id="search">
					<input class="sb-search-submit" type="submit" value="">
					<span class="sb-icon-search"> </span>
				</form>
			</div>
		</div>
		<!--search-scripts-->
		<script th:src="@{/js/classie.js}"></script>
		<script th:src="@{/js/uisearch.js}"></script>
		<script>
            new UISearch( document.getElementById( 'sb-search' ) );
		</script>
		<!--search-scripts-->
		<div class="clearfix"></div>
	</div>
	<div class="col-sm-4 header_right">
		<div id="loginContainer"><a href="#" id="loginButton"><img th:src="@{/images/login.png}">
			<span th:if="${session.user != null}" th:text="${session.user.userName}">登录</span>
			<span th:if="${session.user == null}" >登录</span>
		</a>
			<div id="loginBox">
				<form id="loginForm" th:action="@{/userLogin/login}" method="post">
					<fieldset id="body">
						<fieldset>
							<label for="userName">用户名</label>
							<input type="text" name="userName" id="userName">
						</fieldset>
						<fieldset>
							<label for="password">密码</label>
							<input type="password" name="userPassword" id="password">
						</fieldset>
						<input type="submit" id="login" value="登录">
						<input type="submit" id="regist" value="注册" ><a href="regist.html"></a>
						<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
					</fieldset>
					<span><a href="#">忘记密码?</a></span>
				</form>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
</div>

<div class="content_top">
	<div class="container">
		<div class="col-md-4 bottom_nav">
			<div class="content_menu">
				<ul>
					<li class="active"><a href="#">未完成订单</a></li>
					<li><a th:href="@{/userOrder/hisorder}">历史订单</a></li>

				</ul>
			</div>
		</div>
	</div>
</div>
<div class="content_middle">
    <div class="container">
			<div class="col-md-12">
					<table class="table table-hover" id="mytable">
					  <thead>
					  <th>订单编号</th>
					  <th>城市</th>
					  <th>酒店名称</th>
					  <th>订单状态</th>
					  <th>预定时间</th>
					  <th>入住时间</th>
					  <th>订单金额</th>
					  <th>支付状态</th>
					  <th>操作</th>
					  </thead>
					  
					  <!--从数据库读取订单信息-->
					  <tbody>

						<tr th:each="c:${orders}">
							<td th:text="${c.orderId}"></td>
							<td th:text="${c.cityName}"></td>
							<td th:text="${c.hotelName}"></td>
							<td th:text="${c.orderStatus}"></td>
							<td th:text="${#dates.format(c.orderTime,'yyyy/MM/dd HH:mm')}"></td>
							<td th:text="${#dates.format(c.orderInTime,'yyyy/MM/dd HH:mm')}"></td>
							<td th:text="${c.orderPayMoney}"></td>
							<td th:text="${c.orderPayStatus}"></td>

							<td>
								<a th:href="@{/userOrder/orderitem(id=${c.orderId})}"><button class="btn btn-success btn-xs btn-flat">查看详情</button></a>
								<a th:href="@{/userOrder/Payorder(id=${c.orderId})}"><button class="btn btn-success  btn-xs btn-flat">支付</button></a>
								<a th:href="@{/cityHotel/towriteMessage(id=${c.orderId})}"><button class="btn btn-success  btn-xs btn-flat">点击评论</button></a>
								<a th:href="@{/userOrder/Hisorder(id=${c.orderId})}"><button class="btn btn-warning  btn-xs btn-flat" onclick="show()">退订</button></a>

							</td>
						</tr>

					  </tbody>
					</table>
			</div> 
	</div>
</div>

<div class="footer">
	<div class="container">
		<div class="footer_top">
			<h3>订阅我们的通知</h3>
			<form>
		<span>
			<i><img th:src="@{/images/mail.png}" alt=""></i>
		    <input type="text" value="请输入您的邮箱地址" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入您的邮箱地址';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit" value="订阅"> </label>
		    <div class="clearfix"> </div>
		</span>
			</form>
		</div>
		<div class="clearfix"> </div>
	</div>
</div>

</div>
<script>
    function show(){
        alert("退订成功!");
    }
</script>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<!-- page script -->
<script>
    $(function () {
        $('#mytable').DataTable({
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search": "快速检索: ",
                "oPaginate": {
                    "sPrevious": "上页",
                    "sNext": "下页"
                }
            }

        })
    })
</script>
</body>
</html>